<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-03-29 17:27:17
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2023-06-12 17:38:00
 * @FilePath: /tea-garden-web/src/pages/base-overview.vue
 * @Description: 基地概览
-->
<template>
  <div class="base-overview">
    <!-- 二级路由 -->
    <router-view class="left-drawer" name="left-drawer"></router-view>
    <!-- 地图模块 -->
    <component-map ref="component-map" />
    <!-- 专题图例 -->
    <!-- <component-legend-subject class="legend-1" /> -->
    <!-- 设备图例 -->
    <component-legend-equipment class="legend-2" />
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  computed: {
    ...mapState('base-overview', ['allEquipment', 'allFarmLand', 'legends'])
  },
  methods: {
    ...mapActions('base-overview', ['getAllEquipment', 'getAllFarmLand']),
    // 显示特定组件
    handleShowComponent (name) {
      this.showComponent = name
    }
  },
  created () {
    if (this.allEquipment.length === 0) {
      this.getAllEquipment()
    }
    if (this.allFarmLand.length === 0) {
      this.getAllFarmLand()
    }
  }
}
</script>

<style lang="scss">
.base-overview {
  height: 100%;
  .left-drawer {
    width: 308px;
    height: 780px;
    background: #089bab;
    box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.1);
    border-radius: 15px 15px 15px 15px;
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 999;
  }
  .legend-1 {
    position: absolute;
    left: 327.5px;
    bottom: 10px;
  }
  .legend-2 {
    position: absolute;
    left: 327.5px;
    top: 10px;
  }
}
</style>
